<template>
  <div class="production-plan">
 <el-button type="primary" @click="saveAll">保存主表单和明细</el-button>
  <!-- 标题 -->
    <div class="page-title">
      <h2>生产补料</h2>
    </div>

    <!-- 基本信息 -->
    <div class="info-section">
      <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="单据主题">
              <el-input v-model="formData.documentSubject" placeholder="请输入主题"  />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据编号">
              <el-input v-model="formData.documentNumber" placeholder="请输入编号"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来源类型" prop="sourceDocumentType" required>
              <el-input v-model="formData.sourceDocumentType" placeholder="请输入"  />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来源单据" prop="sourceDocument" required>
               <el-select v-model="formData.sourceDocument" placeholder="">
                <el-option label="生产领料" value="生产领料信息" />
                <el-option label="补料领料" value="补料领料信息" />
                <el-option label="生产补料" value="生产补料信息" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="制单人员" prop="makingPersonnel">
              <el-input v-model="formData.makingPersonnel" type="textarea"  />
            </el-form-item>
          </el-col>
           <el-col :span="10">
            <el-form-item label="补料日期" prop="supplementDate">
              <el-date-picker
                v-model="formData.supplementDate"
                type="date"
                required
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="补料数量合计">
                <el-input-number v-model="formData.supplementQuantityTotal" placeholder="请输入数量" :min="0" :step="1" />
              </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="制单日期" prop="makingDate">
              <el-date-picker
                v-model="formData.makingDate"
                type="date"
                required
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="关联项目" prop="relatedProject">
              <el-input v-model="formData.relatedProject" type="textarea"  />

            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="formData.remarks" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
        
      </el-form>

    </div>
       <!-- 顶部按钮栏 -->
        <!-- 标题 -->


    <!-- 标题 -->
    <div class="page-title">
      <h2>补料明细</h2>
    </div>
    <!-- 物料明细 -->
    <div class="detail-section">

      <el-button size="small" @click="addNewRow">新增行</el-button>
      <el-button size="small"  @click="batchSaveDetails"> 批量保存明细</el-button>

      <el-table :data="planDetailsList" border style="width: 100%">
               <el-table-column label="产品名称" width="180px">
          <template #default="{ row }">
            <el-input 
              v-model="row.productName" 
              :readonly="row.isSaved"
            >
              <template #suffix>
                <el-button size="mini" @click="openProductNameDialog(row)">
                  <i class="el-icon-search"></i>
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="产品编号" >
          <template #default="{ row }">
            <el-input v-model="row.productNumber" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template #default="{ row }">
            <el-input v-model="row.specificationModel" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位">
          <template #default="{ row }">
            <el-input v-model="row.unit" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
         <el-table-column label="补料数量">
          <template #default="{ row }">
            <el-input-number 
              v-model.number="row.supplementQuantity" 
              :min="0" 
              controls-position="right"
              :disabled="row.isSaved"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="出库库管">
          <template #default="{ row }">
            <el-select 
              v-model="row.outboundWarehouseManager" 
              :disabled="row.isSaved"        
              placeholder="请选择库管"
              clearable>
              <el-option
                v-for="item in warehouseManagers"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
         <el-table-column label="现有库存">
          <template #default="{ row }">
            <el-input-number 
              v-model.number="row.currentStock" 
              :min="0" 
              controls-position="right"
              :disabled="row.isSaved"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="交货日期">
            <template #default="{ row }">
               <el-date-picker
                   v-model="row.deliveryDate"
                    type="date">
                </el-date-picker>
            </template>
        </el-table-column>
           <el-table-column label="补料方式">
          <template #default="{ row }">
            <el-input v-model="row.supplementMethod" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template #default="{ row }">
            <el-input v-model="row.specification" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
      

        <el-table-column label="规格">
          <template #default="{ row }">
            <el-input v-model="row.relatedDocument" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="关联项目">
          <template #default="{ row }">
            <el-input v-model="row.relatedProjectt" :readonly="row.isSaved"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="small" @click="saveSingleDetail(row)" :disabled="row.isSaved">保存本条</el-button>
              <el-button size="small" type="success" @click="UpdateDetail(row)">修改</el-button> 
            <el-button size="small" type="danger" @click="deleteDetail(row)" :disabled="row.isSaved">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

        <!-- 附件部分 -->
  <div id="app">
    <el-card>
      <template #header>
        <div class="flex justify-between items-center">
          <span>MinIO 文件上传</span>
        </div>
      </template>
      <el-form ref="formRef1" :model="formData1" label-width="100px">
        <el-form-item label="选择文件">
          <el-upload ref="uploadRef1" action="https://localhost:7269/api/FileUpload/UploadFile" :headers="headers"
            :on-success="handleSuccess" :on-error="handleError" :show-file-list="false" :http-request="customRequest">
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">上传文件</el-button>
        </el-form-item>
      </el-form>
      <el-alert v-if="message" :message="message" :type="messageType" :closable="false" style="margin-top: 20px" />
    </el-card>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="key" label="文件名称" width="200" />
      <el-table-column prop="lastModified" label="创建时间" width="200">
        <template #default="scope">
          {{ new Date(scope.row.lastModified).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="size" label="文件大小" min-width="200" />
      <el-table-column fixed="right" label="操作" min-width="200">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="openDeleteDialog(scope.row.key)">
            删除文件
          </el-button>
          <el-button link type="primary" size="small" @click="download(scope.row.key)">下载文件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="isDeleteDialogVisible" title="删除确认" @close="closeDeleteDialog">
      <p>确定要删除该文件吗？</p>
      <template #footer>
        <el-button @click="closeDeleteDialog">取消</el-button>
        <el-button type="primary" @click="confirmDelete">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="isDownloadDialogVisible" title="文件下载">
      <template #content>
        <el-progress :percentage="downloadProgress" :status="downloadStatus"></el-progress>
      </template>
      <template #footer>
        <el-button @click="closeDownloadDialog">关闭</el-button>
      </template>
    </el-dialog>
  </div>


     <!-- 物理明细产品名称选择对话框 -->
    <el-dialog
      v-model="productNameDialogVisible"
      width="500px"
      title="产品名称选择"
      append-to-body
    >
      <el-table
        :data="productNames"
        highlight-current-row
        border
        size="small"
        @current-change="handleProductNameChange"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column property="productsNumber" label="产品编号" />
        <el-table-column property="productsName" label="产品名称" />
        <el-table-column property="productsNum" label="规格型号" />
        <el-table-column property="productsUnit" label="单位" />
      </el-table>
      <template #footer>
        <el-button @click="pickProductName">确定</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import {Materialwrite,Materialread} from '@/axios/axiosHelper'
import axios from 'axios';
const formRef = ref(null);
const currentUser = ref("admin"); 
const router = useRouter();
const route = useRoute();

// 主表单数据
const formData = reactive({
  
  "documentSubject": "",
  "documentNumber": "SCBL",
  "sourceDocumentType": "",
  "sourceDocument": "",
  "makingPersonnel": "",
  "supplementDate": "",
  "supplementQuantityTotal": '',
  "makingDate": "",
  "relatedProject": "",
  "remarks": ""
});

// 如果是固定数据
const warehouseManagers = ref([
  { value: 'manager1', label: '张三' },
  { value: 'manager2', label: '王五' },
  { value: 'manager3', label: '王小明' },
  { value: 'manager4', label: '李四' },
]);

// 主表单验证规则
const rules = reactive({
  documentSubject: [
    { required: true, message: '单据主题不能为空', trigger: 'blur' }
  ],
  documentNumber: [
    { required: true, message: '领料日期不能为空', trigger: 'blur' }
  ],
   supplementDate: [
    { required: true, message: '补料日期不能为空', trigger: 'blur' }
  ],
   makingDate: [
    { required: true, message: '制料日期不能为空', trigger: 'blur' }
  ],
});

// 保存主表单和明细
const saveAll = async () => {
  if (formRef.value) {
    const isValid = await formRef.value.validate();
    if (isValid) {
      try {
        // 保存主表单
        const response = await axios.post('https://localhost:7077/api/Ment/AddFeeding', formData);
        if (response.data.code === 100) {
          formData.feedingId = response.data.data.feedingId;
          ElMessage.success('主表单保存成功');

          // 保存明细
          const saveDetailPromises = planDetailsList.value.map(async (row) => {
            const detailWithId = {
              ...row,
              feedingId: formData.feedingId
            };
            const detailResponse = await axios.post(
              'https://localhost:7077/api/Ment/AddFeedDetails',
              detailWithId
            );
            if (detailResponse.data.code === 100) {
              row.isSaved = true;
              return true;
            } else {
              ElMessage.error(`明细保存失败：${detailResponse.data.message}`);
              return false;
            }
          });

          const results = await Promise.all(saveDetailPromises);
          if (results.every(result => result)) {
            ElMessage.success('所有明细保存成功');
              router.push('/ShowFeeding');
          }
        } else {
          ElMessage.error(`主表单保存失败：${response.data.message}`);
        }
      } catch (error) {
        console.error('保存过程中发生错误:', error.response?.data);
        ElMessage.error('保存过程中发生错误，请检查网络或联系管理员');
      }
    }
  }
};
// 明细数据列表
const planDetailsList = ref([]);

const attachments = ref([]);

// 新增行
const addNewRow = () => {
  planDetailsList.value.push({
 "feedDetailsId": 0,
  "feedingId": 0,
  "productName": "",
  "productNumber": "",
  "specificationModel": "",
  "unit": "",
  "supplementQuantity": '',
  "outboundWarehouseManager": "",
  "currentStock": '',
  "deliveryDate": "",
  "supplementMethod": "",
  "specification": "",
  "relatedDocument": "",
  "relatedProjectt": "",
  "isDel": true,
   productInfoFilled: false // 新增标志位，初始化为 false
  });
};


// 批量保存明细
const batchSaveDetails = async () => {
  // if (!formData.feedingId) {
  //   ElMessage.warning('请先保存主表单');
  //   return;
  // }

  const detailsWithId = planDetailsList.value.map(detail => ({
    ...detail,
   feedingId: formData.feedingId,
  }));

  try {
    const response = await Materialwrite.post(
      '/l-wirth/api/Ment/AddFeedDetails',
      detailsWithId
    );
    if (response.data.code == 100) {
      ElMessage.success('明细批量保存成功');
    } else {
      ElMessage.error(`明细批量保存失败：${response.data.message}`);
    }
  } catch (error) {
    console.error('保存明细时发生错误:', error.response?.data);
    ElMessage.error('保存明细时发生错误，请检查网络或联系管理员');
  }
};

// 保存单条明细
const saveSingleDetail = async (row) => {
  // if (!formData.pickingId) {
  //   ElMessage.warning('请先保存主表单');
  //   return;
  // }

  const detailWithId = {
    ...row,
    pickingId: formData.pickingId,
  };

  try {
    const response = await Materialwrite.post(
      '/l-wirth/api/Ment/AddFeedDetails',
      detailWithId
    );
    if (response.data.code == 100) {
      ElMessage.success('单条明细保存成功');
    } else {
      ElMessage.error(`单条明细保存失败：${response.data.message}`);
    }
  } catch (error) {
    console.error('保存单条明细时发生错误:', error.response?.data);
    ElMessage.error('保存单条明细时发生错误，请检查网络或联系管理员');
  }
};


// 产品名称数据
const productNames = ref([]);

const productNameDialogVisible = ref(false);
const currentProductNameRow = ref(null);
const currentProductName = ref({});

// 获取产品信息
const fetchProducts = () => {
  axios.get("https://localhost:7095/api/Products/GetProducts")
    .then(res => {
      productNames.value = res.data.data;
      console.log("产品数据：", productNames.value);
      nextTick(() => {
        // 强制更新表格
      });
    })
    // .catch(error => {
    //   console.error('获取产品信息失败:', error);
    //   ElMessage.error('获取产品信息失败，请检查网络或联系管理员');
    // });
};



// 打开产品名称选择对话框
const openProductNameDialog = (row) => {
  if (productNames.value.length === 0) {
    ElMessage.warning('产品信息正在加载，请稍后重试');
    return;
  }
  currentProductNameRow.value = row;
  productNameDialogVisible.value = true;
};

// 当前选中的产品名称行
const handleProductNameChange = (val) => {
  currentProductName.value = val;
};

// 选择产品名称
const pickProductName = () => {
  if (currentProductName.value && currentProductNameRow.value) {
    currentProductNameRow.value.productName = currentProductName.value.productsName;
    currentProductNameRow.value.productNumber = currentProductName.value.productsNumber;
    currentProductNameRow.value.specificationModel = currentProductName.value.productsNum;
    currentProductNameRow.value.unit = currentProductName.value.productsUnit;
    currentProductNameRow.value.productInfoFilled = true; // 设置标志位，表示产品信息已填充
    productNameDialogVisible.value = false;
  }
};

onMounted(() => {

  fetchProducts();

});


import { ElDialog } from 'element-plus';


const formRef1 = ref(null);
const uploadRef = ref(null);
const formData1 = ref({});
const message = ref('');
const messageType = ref('');
const tableData = ref([{
  key: "",
  lastModified: "",
  eTag: "",
  size: 0,
  isDir: false,
  versionId: null,
  contentType: null,
  expires: null,
  userMetadata: null,
  isLatest: false,
  lastModifiedDateTime: "",
}]);
const isDeleteDialogVisible = ref(false);
const currentDeleteKey = ref('');
const isDownloadDialogVisible = ref(false);
const downloadProgress = ref(0);
const downloadStatus = ref('');

onMounted(() => {
  listObjects();
});

const download = async (key) => {
  isDownloadDialogVisible.value = true;
  downloadProgress.value = 0;
  downloadStatus.value = 'active';
  try {
    const response = await axios.get(`/api/FileUpload/DownloadFile?objectName=${key}`, {
      responseType: 'blob',
      onDownloadProgress: (progressEvent) => {
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        downloadProgress.value = percentCompleted;
      }
    });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', key);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    downloadStatus.value = 'success';
  } catch (error) {
    console.error('文件下载失败:', error);
    message.value = '文件下载失败: ' + (error.response?.data?.error || error.message);
    messageType.value = 'error';
    downloadStatus.value = 'exception';
  }
};

const listObjects = async () => {
  axios.get("https://localhost:7212/api/FileUpload/ListObjectsInOneBucket")
    .then((res) => {
      tableData.value = res.data;
      console.log("查询成功", res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

const headers = {
  'Content-Type': 'multipart/form-data'
};

const customRequest = async (options) => {
  const formData1 = new FormData();
  formData1.append('file', options.file);
  const response = await axios.post(options.action, formData1, {
    headers: headers
  });
  options.onSuccess(response.data);
  if (response.data != null) {
    alert("添加成功");
    return;
  } else {
    alert("添加失败");
    return;
  }
};

const handleError = (error) => {
  message.value = '上传失败: ' + (error.response?.data?.error || error.message);
  messageType.value = 'error';
};

const submitForm = () => {
  uploadRef.value.submit();
};

const openDeleteDialog = (key) => {
  currentDeleteKey.value = key;
  isDeleteDialogVisible.value = true;
};

const closeDeleteDialog = () => {
  isDeleteDialogVisible.value = false;
  currentDeleteKey.value = '';
};

const confirmDelete = () => {
  axios.delete("https://localhost:7212/api/FileUpload/DeleteObjectInOneBucket", {
    params: {
      objectName: currentDeleteKey.value
    }
  })
    .then((res) => {
      console.log("删除成功", res.data);
      message.value = '文件删除成功';
      messageType.value = 'success';
      listObjects();
      closeDeleteDialog();
    })
    .catch((err) => {
      console.log(err);
      message.value = '文件删除失败: ' + (err.response?.data?.error || err.message);
      messageType.value = 'error';
      closeDeleteDialog();
    });
};

const closeDownloadDialog = () => {
  isDownloadDialogVisible.value = false;
  downloadProgress.value = 0;
  downloadStatus.value = '';
};



</script>

<style scoped>
.production-plan {
    padding: 20px;
}

.title {
    text-align: center;
    margin-bottom: 20px;
}

.sub-title {
    margin: 20px 0 10px;
    font-size: 16px;
    font-weight: 500;
}

.detail-section,
.attachment-section {
    margin-top: 20px;
}

.el-table {
    margin-top: 10px;
}
</style>    